<template>
  <div>
    <div style="width: 800px; position: relative; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <div style="display: inline-block; padding-top: 20px; padding-bottom: 15px; margin-left: -80%">
        <el-avatar :size=100 :src="form.avatar"></el-avatar>
      </div>
      <div style="display: inline-block; position: absolute; top: 10px; width: 400px; margin-left: 30px;  padding-top: 10px; padding-bottom: 15px">
        <div style="font-size: 22px; width: 300px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
          用户昵称: &nbsp;&nbsp;&nbsp;{{ user.nickName}}
        </div>
      </div>
    </div>
    <div style="width: 800px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, 0.4); margin-top: 30px">
      <div  style="padding-top: 30px; padding-bottom: 10px; font-size: 28px; font-family: 楷体; font-weight: bolder; margin-left: -76%">
        基本信息
      </div>

      <div style="width: 500px; margin-top: 25px; margin-left: 120px; padding-bottom: 20px">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="用户昵称">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input v-model="form.userName" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户 ID">
            <label slot="label">用户&nbsp;&nbsp;&nbsp;ID</label>
            <el-input v-model="form.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
            <div >
              <el-radio v-model="form.sex" :label="0" style="margin-left: -230px">男</el-radio>
              <el-radio v-model="form.sex" :label="1">女</el-radio>
              <el-radio v-model="form.sex" :label="2">保密</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input v-model="description" type="textarea" placeholder="该用户还没有写简介"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <div>
              <el-date-picker
                  v-model="birth"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="margin-left: -200px"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="所在地区">
            <el-input v-model="address" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="padding-bottom: 50px; margin-left: -58px; ">
        <el-button type="primary" @click="submitForm()" size="small">保存</el-button>
        <el-button @click="resetForm()" size="small">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonProfile",
  data(){
    return{
      form: {},
      // 描述 生日 地址都是假信息
      description: "",
      birth: "2023-03-07",
      address: "武汉工程大学流芳校区",
      user: {},
      nickName: ""
    }
  },
  methods: {
    getUserInfo: function () {
      // 调用获取用户信息接口
      // var url = axios.defaults.baseURL + ":8000/member/user/info/me"
      // axios.get(url).then(res => {
      //   if (res.data.code == 200){
      //     var user = res.data.data;
      //     // 设置 用户信息
      //     localStorage.setItem("user", JSON.stringify(user));
      //     this.user = JSON.parse(localStorage.getItem("user"))
      //     this.form = JSON.parse(JSON.stringify(this.user))
      //   }else{
      //     this.$message.error("网络异常，用户信息获取失败")
      //   }
      // })
      this.user = {
        id: 1635088985338245122,
        userName: "admin",
        avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png",
        nickName: this.nickName,
        sex: 0
      }
      this.form = this.user
    },
    resetForm: function (){
      this.getUserInfo()
      this.description = ""
      this.birth = "2023-03-07"
      this.address = "武汉工程大学流芳校区"
    },
    submitForm: function (){
      // todo 用户昵称正则表达式判断
      // 调用用户更新接口
      localStorage.setItem("nickName", this.form.nickName)
      this.$message.success("更新成功")
      thi.$router.go(0)

      // console.log("requestBody")
      // console.log(this.form)
      // var requestBody = this.form;
      //
      //
      //
      // var url = axios.defaults.baseURL + "/member/user/update"
      // axios.post(url, requestBody).then(res => {
      //   console.log(res)
      //   if (res.data.code == 200) {
      //     this.$message.success("更新成功")
      //   } else {
      //     this.$message.error(res.data.description)
      //   }
      // })
      // 调用用户更新接口
    }
  },
  mounted() {
    this.nickName = localStorage.getItem("nickName")
    this.getUserInfo();
  }
}
</script>

<style scoped>

</style>